<template>
  <div class="c-swiper">
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <template v-for="(img, index) in bannerImgs" :key="index">
        <van-swipe-item>
          <img :src="img" alt="" />
        </van-swipe-item>
      </template>
    </van-swipe>
  </div>
</template>

<script setup>
import { reactive } from 'vue'
import banner1 from '@/assets/images/banner1.jpg'
import banner2 from '@/assets/images/banner2.jpg'
import banner3 from '@/assets/images/banner3.jpg'
const bannerImgs = reactive([banner1, banner2, banner3])
</script>

<style lang="less" scoped>
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  // line-height: 150px;
  height: 200px;
  text-align: center;
  // background-color: #39a9ed;
  img {
    width: 100%;
    height: 100%;
  }
}
</style>
